<template>
	<a-card :bordered="false">
		<div class="table-page-search-wrapper">
			<a-form layout="inline">
				<a-row :gutter="48">
					<a-col :md="6" :sm="24">
						<a-form-item label="班组名称">
							<a-input v-model="queryParam.name" placeholder="请输入班组名称" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-form-item label="班组编号">
							<a-input v-model="queryParam.code" placeholder="请输入班组编号" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-form-item label="班组编号">
							<a-radio-group v-model="queryParam.status" button-style="solid">
								<a-radio-button :value="null">
									全部
								</a-radio-button>
								<a-radio-button :value="0">
									正常
								</a-radio-button>
								<a-radio-button :value="1">
									禁用
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :md="4" :sm="24">
						<span class="table-page-search-submitButtons"
							:style="advanced && { float: 'right', overflow: 'hidden' } || {}">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button style="margin-left: 8px"
								@click="() => { queryParam = { status: null };$refs.table.refresh(true); }">重置</a-button>
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<div class="table-operator">
			<template>
				<a-button type="primary" @click="$refs.addForm.add()" icon="plus">新增</a-button>
			</template>
		</div>

		<!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
		<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
			:rowKey="(record) => record.code">
			<template slot="status" slot-scope="text, record">
				<a-switch :checked="record.status == 0" checked-children="正常" un-checked-children="禁用" :loading="record.loading"
					@change="onStatusChange($event, record)" />
			</template>
			<span slot="action" slot-scope="text, record">
				<template>
					<a @click="$refs.addForm.readonly(record)">详情</a>
					<a-divider type="vertical" />
					<a @click="$refs.addForm.edit(record)">编辑</a>
				</template>
			</span>

		</s-table>

		<add-form ref="addForm" @ok="handleOk" />
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page, changeStatus } from '@/api/modular/main/classGroup/classGroup'

import { getUrlParam } from '@/utils/util'

import addForm from './teamManagementAddForm.vue'

export default {
	components: {
		STable,
		addForm,
	},
	data() {
		return {
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {
				status: null
			},  // 查询参数
			columns: [
				{
					title: '序号', width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '班组名称',
					dataIndex: 'name'
				},
				{
					title: '班组编号',
					dataIndex: 'code'
				},
				{
					title: '说明',
					dataIndex: 'remark'
				},
				{
					title: '状态',
					dataIndex: 'status',
					scopedSlots: { customRender: 'status' }
				},
				{
					title: '排序',
					dataIndex: 'sort',
				},
				{
					title: '操作',
					dataIndex: '',
					width: '280px',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			scheduleProductionVisible: false,
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
			urlParam: {},
			columnsType: '',
			suppliers: [],
			orgs: [],
			viewState: '',
			materialType: '',
		}
	},
	computed: {

	},
	methods: {
		handleOk() {
			this.$refs.table.refresh();
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		onStatusChange(checked, row) {
			console.log(checked, row);
			let status = checked ? 0 : 1
			changeStatus({
				classGroupId: row.classGroupId,
				status: status
			}).then(res => {
				this.handleOk();
			})
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
